<template>
  <div style="display: flex; justify-content: space-between">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>文件处理</el-breadcrumb-item>
      <el-breadcrumb-item>excel导出</el-breadcrumb-item>
    </el-breadcrumb>

    <el-button @click="fn">导出文件</el-button>
  </div>

  <el-table :data="proList" style="width: 100%">
    <el-table-column prop="proname" label="产品名称" />
    <el-table-column label="产品图片">
      <template #default="scope">
        <el-image
          style="width: 100px; height: 100px"
          :src="scope.row.img1"
          :preview-src-list="[scope.row.img1]"
          fit="cover"
          :preview-teleported="true"
        />
      </template>
    </el-table-column>
    <el-table-column prop="category" label="产品分类" />
    <el-table-column prop="brand" label="产品品牌" />
    <el-table-column prop="originprice" label="产品价格" />
    <el-table-column prop="discount" label="产品折扣" />
    <el-table-column label="是否售卖">
      <template #default="scope">
        <el-switch
          v-model="scope.row.issale"
          :active-value="1"
          :inactive-value="0"
        />
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button>编辑</el-button>
        <el-button type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import ExportJsonExcel from "js-export-excel";

import { ref, onMounted } from "vue";
import { getProApi } from "@/api/pro";
const proList = ref([]);

onMounted(async () => {
  const res: any = await getProApi({
    count: 1,
    limitNum: 10,
  });
  // console.log(res);
  if (res) {
    proList.value = res.data;
  }
});

const fn = () => {
  const option: any = {};

  option.fileName = "产品信息";
  option.datas = [
    {
      sheetData: proList.value,
      sheetName: "产品信息",
      sheetFilter: ["proname", "originprice"],
      sheetHeader: ["产品名称", "产品售价"],
      columnWidths: [20, 20],
    },
  ];

  var toExcel = new ExportJsonExcel(option); //new
  toExcel.saveExcel(); //保存
};
</script>
